* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
	background-color: #141414;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.main-header {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	background-color: #222222;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header {
	/* position: absolute;
	left: 0;
	top: 0; */
	display: flex;
	align-items: center;
	/* justify-content: center; */
	width: 990px;
	height: 100%;
	background-color: transparent;
	padding-left: 10px;
}

.fon {
	/* position: absolute; */
	z-index: 1;
	left: 0;
	top: 10px;
	width: 30px;
	height: 30px;
	background-color: #fff;
	border-radius: 50px;
}

.greet {
	color: white;
}

.wrapper {
	position: relative;
	display: flex;
	max-width: 960px;
	/* height: 100vh; */
	/* margin: 10px; */
}

.left {
	width: 50vw;
	background-color: transparent;
	margin-top: 65px;
	padding-right: 120px;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.left > h2 {
	color: white;
	text-align: center;
	margin-top: 20px;
	font-size: 1.4em;
}
.left > p {
	color: rgb(156, 156, 156);
	text-align: center;
	font-size: 0.9em;
	margin-top: 15px;
	line-height: 1.5;
}

.photos {
	display: flex;
	margin-top: 30px;
}

.l-photo {
	width: 180px;
	height: 100%;
}

.l-photo > img {
	width: 100%;
}

.r-photo {
	width: 195px;
	height: 100px;
}

.r-photo > img {
	width: 100%;
	margin-left: -30px;
}

.buttons {
	width: 400px;
	padding-right: 50px;
	height: 20px;
	background-color: transparent;
	margin-top: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.b-store > svg {
	margin-top: 2px;
	margin-right: 5px;
}

.b-store {
	background-color: transparent;
	color: #fff;
	padding: 5px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 7px;
	cursor: pointer;
}

.b-store:hover {
	background-color: #333333;
}

.all-prod {
	margin-top: 40px;
	color: #70abe6;
	font-size: 0.9em;
	cursor: pointer;
}

.all-prod > span {
	padding-left: 5px;
	font-size: 0.9em;
	text-decoration: none;
}

.all-prod:hover {
	text-decoration: underline;
}

.right {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.enter {
	padding: 30px 20px;
	background-color: #222222;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
	border-radius: 12px;
	margin-top: 65px;
}

.enter > h2 {
	font-size: 1.2em;
	text-align: center;
}

.create {
	padding: 30px 20px;
	background-color: #222222;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	border-radius: 12px;
}

.create > p {
	color: #5f5f5f;
	width: 250px;
	font-size: 0.8em;
	text-align: center;
}

.create > a {
	color: #a1a1a1;
	margin-top: -15px;
	font-size: 0.8em;
	text-align: center;
	text-decoration: none;
}

.create > a:hover {
	text-decoration: underline;
}

input {
	width: 270px;
	border: none;
	padding: 10px;
	border-radius: 10px;
	background-color: #333333;
	border: 1px rgb(165, 165, 165) solid;
	color: white;
}

input:focus {
	outline: solid rgb(0, 116, 211) 1px;
}

.but-inp {
	background-color: #fff;
	border: none;
	border-radius: 10px;
	padding: 10px;
	width: 275px;
	cursor: pointer;
}

.si:hover {
	background-color: #e9e9e9;
}

.create-btn {
	background-color: #4fb253;
	color: white;
	cursor: pointer;
}

.create-btn:hover {
	background-color: #4aa74d;
	color: rgb(207, 207, 207);
}

.createB-btn {
	background-color: transparent;
	color: white;
	outline: solid rgb(0, 116, 211) 1px;
}

.createB-btn:hover {
	background-color: rgb(58, 58, 58);
	color: rgb(207, 207, 207);
	outline: solid rgb(0, 116, 211) 1px;
}

.rec {
	color: #a1a1a1;
	font-size: 0.8em;
	text-align: center;
}


.links {
    background-color: transparent;
    width: 960px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.links-l > a,
.links-c > a,
.links-r > a {
    color: #70abe6;
    text-decoration: none;
    font-size: 0.8em;
}

.links-l > a:hover,
.links-c > a:hover,
.links-r > a:hover {
    text-decoration: underline;
}

.links-l > span {
    color: #7F7F7F;
    font-size: 0.8em;
}

/* .links-l {
    width: 30px;
    height: 30px;
    background-color: green;
} */

.links-c {
    display: flex;
    gap: 10px;
}

.links-r {
    display: flex;
    gap: 10px;
}

@media (max-width: 430px) {
	.main-header,
    .header,
    .left,
    .links {
		display: none;
	}
    .right {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        gap: 20px;
    }

    .enter {
        margin: 20px 20px 0 20px ;
    }

    .create {
        margin: 0 20px 0 20px;
    }
}